<?php
$customerList = $data['data'];
$maxPage = $data['MaxPage'];
?>
<h1>User Companies Info</h1>
<!--<div class="panel panel-default" style=" background-color: ghostwhite; ">
    <div class="panel-body">
        <form action="index.php?r=ClientManage/view" method="get" id="formSearch">
            <input type="hidden" name="r" value="<?= $_GET['r'] ?>">
            <div class="row-fluid">
                <input class="span10" id="appendedInputButtons" type="text">
                <div class="span6">
                    <label class="control-label" for="inputKeyword"><b>Keyword:</b></label>
                    <input type="search" name="Keyword" id="inputKeyword" class="span12">
                </div>
                <div class="span6">
                    <label class="control-label" for="inputProvince"><b>Select location:</b></label>
                    <select class="span12" name="Province" id="inputProvince">
                        <option selected="selected" value="0"></option>
                        <?= GM::getOptionDropdownProvince('en') ?>
                    </select>
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-large btn-danger" type="button" id="btn-search"><i class="icon-search"></i> Search</button>
            </div>
        </form>
    </div>
</div>-->
<a href="index.php?r=ClientManage/Form" class="btn btn-primary pull-right">Add User</a>
<div class="table-responsive">
<table class="table table-striped table-hover tablestaff">
    <thead>
        <tr>
            <th>#</th>
            <th>Contact Name</th>
            <th>Company Name</th>
            <th>Address</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Status</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php
        $i = 0;
        foreach ($customerList as $row) {
            $i++;
            $status = '';
            switch ($row['ActiveStatus']) {
                case 'A':
                    $status = "Active";
                    break;
                case 'I':
                    $status = "Inactive";
                    break;
                case 'S':
                    $status = "Suspend";
                    break;
            }
            
            ?>
            <tr data-id="<?= $row['ClientID'] ?>"
                data-contactname="<?= $row['ContactName'] ?>"
                data-companyname="<?= $row['CompanyName'] ?>"
                data-address="<?= $row['Address'] ?>"
                data-provinceName="<?= $row['ProvinceName'] ?>"
                data-zipcode="<?= $row['ZipCode'] ?>"
                data-email="<?= $row['Email'] ?>"
                data-phone="<?= $row['Phone'] ?>"
                data-fax="<?= $row['Fax'] ?>"
                data-mobile="<?= $row['Mobile'] ?>"
                data-pagelanguage="<?= $row['PageLanguage'] ?>">
                <td><?= $i + ($dataPerpage * ($page - 1)) ?></td>
                <td><?= $row['ContactName'] ?></td>
                <td><?= $row['CompanyName'] ?></td>
                <td><?php echo $row['Address']." ".$row['ProvinceName']." ".$row['ZipCode'] ?></td>
                <td><?= $row['Email'] ?></td>
                <td><?= $row['Phone'] ?></td>
                <td class="col-status">
                    <div class="btn-group">
                        <button class="btn btn-primary btn-small" id="btn-status"><?= $status ?></button>
                            <button class="btn btn-primary btn-small dropdown-toggle" data-toggle="dropdown" <?= $row['ActiveStatus'] == 'I'?'disabled':''?>>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);" onclick="changeStatusCustomer(<?=$row['ClientID']?>, 'A')">Active</a></li>
                                <li><a href="javascript:void(0);" onclick="changeStatusCustomer(<?=$row['ClientID']?>, 'S')">Suspend</a></li>
                              </ul>
                        </div>
                </td>
                <td class="col-detail"><a href="#staffDetail" role="button" data-toggle="modal"><img src="images/page_white_magnify.png" title="Detail"></a></td>
                <td class="col-edit"><a href="index.php?r=ClientManage/Form&ClientID=<?= $row['ClientID'] ?>"><img src="images/page_white_edit.png" title="Edit"></a></td>
                <td class="col-delete">
                    <form action="index.php?r=ClientManage/Delete" method="post" onsubmit="return confirmDelete()">
                        <input id="Page" name="p" type="hidden" value="<?= $page ?>">
                        <input id="ClientID" name="ClientID" type="hidden" value="<?= $row['ClientID'] ?>">
                        <input type="image" src="images/delete.png" title="Delete">
                    </form>
                </td>
            </tr>
<?php } ?>
    </tbody>
</table>
</div>

<!--PAGE-->
<?php
if (isset($_GET['Keyword']) || isset($_GET['Province'])) {
    $url = "index.php?r=ClientManage/View&Keyword={$_GET['Keyword']}&Province={$_GET['Province']}&";
} else {
    $url = "index.php?r=ClientManage/View&";
}

GM::paging($url, $page, $maxPage);
?>

<!-- Modal -->
<div id="staffDetail" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel"><img src="images/building.png"> Company Detail</h3>
    </div>
    <div class="modal-body">
        <table class="table table-bordered table-striped">
            <tr><th>Contact Name</th><td id="cell-contactname"></td></tr>
            <tr><th>Company Name</th><td id="cell-companyname"></td></tr>
            <tr><th>Address</th><td id="cell-address"></td></tr>
            <tr><th>Email</th><td id="cell-email"></td></tr>
            <tr><th>Phone</th><td id="cell-phone"></td></tr>
            <tr><th>Fax</th><td id="cell-fax"></td></tr>
            <tr><th>Mobile</th><td id="cell-mobile"></td></tr>
            <tr><th>Register page language</th><td id="cell-pagelanguage"></td></tr>
        </table>
    </div>
    <div class="modal-footer">
        <!--<button class="btn btn-primary">Save changes</button>-->
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

<script>
    $(function(){
        $('.tablestaff tbody').on('click', '.col-status img',function(){
            editStatus($(this));
        });
        $('.tablestaff tbody').on('click', '.col-detail img',function(){
            showDetail($(this));
        });
        
        // get value in form search
        $('#inputKeyword').val('<?= isset($_GET['Keyword']) ? $_GET['Keyword'] : '' ?>');
        $('#inputProvince').val('<?= isset($_GET['Province']) ? $_GET['Province'] : '' ?>');
        
        //fill '-' cell(td)empty
        $('td').each(function(){
            if($(this).html()==''){
                $(this).html('-');
            }
        });
        
        $('#btn-search').click(function(){
            document.getElementById("formSearch").submit();
        });
    });
    function showDetail(objJQ){
        var row = objJQ.parent().parent().parent();
        $('#cell-contactname').text(row.attr('data-contactname'));
        $('#cell-companyname').text(row.attr('data-companyname'));
        $('#cell-address').text(row.attr('data-address')+' '+row.attr('data-provinceName')+' '+row.attr('data-zipcode'));
        $('#cell-email').text(row.attr('data-email'));
        $('#cell-phone').text(row.attr('data-phone'));
        $('#cell-fax').text(row.attr('data-fax'));
        $('#cell-mobile').text(row.attr('data-mobile'));
        $('#cell-pagelanguage').text(row.attr('data-pagelanguage'));
        if(row.attr('data-jobid') == 0){
            $('#row-jobdetail').hide();
        } else {
            $('#row-jobdetail').show();
        }
        $('td').each(function(){
            if($(this).html()==''){
                $(this).html('-');
            }
        });
    }
    
    function changeStatusCustomer(id, status){
        $.post('index.php?r=ClientManage/EditStatus', {
            ClientID: id,
            Status: status
        }, function(data){
            if(data>0){
                switch (status) {
                    case 'A':
                        $('#btn-status').text('Active');
                        break;
                    case 'S':
                        $('#btn-status').text('Suspend');
                        break;
                }
            }
        }, 'text');
    }
    
    function confirmDelete(){
        return confirm('ยืนยันการลบ')?true:false;
    }
</script>
<?php
//print_r($data['data']);
?>